<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/sytle.css">
    <link rel="stylesheet" href="./css/honor.css">
    <title>项目1</title>
</head>

<body>
    <!-- 状态栏 -->
    <div class="status">
        <div class="container">
            <span class="text">华为商城</span>
            <span class="text">花粉俱乐部</span>
            <span class="text">EMUI</span>
            <span class="user"></span>
            <span>登录</span>
            <span> | </span>
            <span>注册</span>
        </div>
    </div>
    <!-- 导航栏 -->
    <div class="nav">
        <div class="container">
            <img src="./image/honor.png" alt="">
            <ul>
                <li>产品</li>
                <li>关于荣耀</li>
                <li>新闻评测</li>
                <li>视频</li>
                <li>活动</li>
                <li>服务支持</li>
            </ul>
            <div class="search">
                <input type="text">
                <div class="search-hover">
                    <span>荣耀20s</span>
                    <span>荣耀9x</span>
                </div>
                <img src="./image/search.png" alt="">
            </div>
        </div>
    </div>
    <!-- banner -->
    <div class="banner">
        <div class="container">
            <div class="arrow arrow-left"></div>
            <div class="arrow arrow-right"></div>
        </div>
    </div>
    <!-- 渐变线 -->
    <div class="line container"></div>

    <!-- 内容区域  -->
    <div class="phone">
        <div class="container">
            <h2>找到适合你的荣耀手机</h2>
            <div class="select-list">
                <select name="" id="" placeholder="产品类型">
                    <option value=""></option>
                </select>
                <select name="" id="" placeholder="屏幕尺寸">
                    <option value=""></option>
                </select>
                <select name="" id="" placeholder="网络制式">
                    <option value=""></option>
                </select>
                <select name="" id="" placeholder="发布时间">
                    <option value=""></option>
                </select>
            </div>
             <div class="range">
                <img src="./image/daqiao.jpg" alt="">
                <div class="btn">个性筛选</div>
            </div>
           <div class="content">
                <img src="./image/daqiao.jpg" alt="">
                <div class="info">
                    <h3>大乔 <span>系列</span> </h3>
                    <p class="intro">大乔-白鹤梁女神</p>
                    <p>定位：辅助</p>
                    <p>限定史诗级皮肤</p>
                    <div class="btn">立即购买</div>
                </div>
            </div>
        </div>
    </div>

    <div class="phone-list container">
        <h4 class="title">相关推荐</h4>
        <div class="list">
            <div class="item">
                <h3>荣耀20</h3>
                <p>定格奇幻之美</p>
                <img src="./image/one.jfif" alt="">
                <div class="btn">立即购买</div>
                <span class="icon icon-1">超值</span>
            </div>
            <div class="item">
                <h3>荣耀20</h3>
                <p>定格奇幻之美</p>
                <img src="./image/one.jfif" alt="">
                <div class="btn">立即购买</div>
            </div>
            <div class="item">
                <h3>荣耀20</h3>
                <p>定格奇幻之美</p>
                <img src="./image/one.jfif" alt="">
                <div class="btn">立即购买</div>
            </div>
            <div class="item">
                <h3>荣耀20</h3>
                <p>定格奇幻之美</p>
                <img src="./image/one.jfif" alt="">
                <div class="btn">立即购买</div>
                <span class="icon icon-2">新品</span>
            </div>
        </div>
    </div>
</body>

</html>
